<template>
	<view class="container" v-for="route in props.routes">
		<!-- 宫格组件 -->
		<uni-section v-if="isLayOut(route)" :title="route.meta?.title" type="line"></uni-section>
		<view class="container mx-auto">
			<view class="m-1 grid col-4" :showBorder="false">
				<view v-if="route.children&&route.children.length>0" v-for="child in route.children"
					@click="menuTab(child)">
					<view class="view-hover px-4 pt-5 pb-10 flex flex-auto flex-col items-center">
						<span :class="`iconfont icon-${child.meta?.icon} text-3xl`"></span>
						<text class="text-center text-xs">{{$lang(`${child.meta?.title}`)}}</text>
					</view>
				</view>
				<view v-else>
					<view class="view-hover px-4 pt-5 pb-10 flex flex-auto flex-col items-center"
						@click="menuTab(route)">
						<span :class="`iconfont icon-${route.meta?.icon}`"></span>
						<text class="text-center">{{$lang(`${route.meta?.title}`)}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	const {
		proxy
	} = getCurrentInstance()
	const props = defineProps({
		routes: {
			type: Object,
			default: {}
		}
	})
	const LayOutTypes = ref(['Layout', 'ParentView'])
	const isLayOut = function(route) {
		if (LayOutTypes.value.includes(route.component)) return true
		return false
	}

	function menuTab(route) {
		if (route.children && route.children.length > 0) {
			proxy.$tab.navigateTo(`/pages/work/subMenu?routes=${JSON.stringify([route])}`);
		} else if (route.path.toLowerCase().indexOf('http') > -1) {
			console.log(route.path)
			proxy.$tab.navigateTo(`/pages/common/webview/index?title='网页'&url=${route.path}`)
		} else {
			proxy.$tab.navigateTo(route.component.indexOf('/')==0?route.component:`/${route.component}`);
		}
	}
</script>

<style lang="scss">
.view-hover{
	@apply active:bg-blue-500 active:rounded-[5px] active:text-white;
	transition: all 0.3s ease;
}
</style>